<template>
	<view>
		<!-- <fa-navbar title=" " :border-bottom="false"></fa-navbar> -->
		<view class="bg2"></view>
		<u-navbar :is-back="true" title="个人中心" title-color="#fff" :background="background" :border-bottom="false"
			:is-fixed="false"> </u-navbar>
		<view class="userTop">
			<!-- <image :src="userInfo.avatar" v-if="userInfo.avatar" mode="aspectFill" class="my_logo"></image> -->
			<image :src="heardimg" v-if="heardimg" mode="aspectFill" class="my_logo"></image>

			<image src="@/static/image/heard.png" v-else mode="aspectFill" class="my_logo"></image>
			<view class="userRight">
				<view class="userName">
					{{ userInfo.nickname || ''}}
				</view>
				<view class="userTips">
					<!-- 暂无更多介绍～ -->
				</view>
			</view>
		</view>
		<!-- 	<view class="info_group">
			<view class="info_item">
				<view class="info_num">
					399
				</view>
				<view class="info_name">
					积分
				</view>
			</view>
			<view class="info_item">
				<view class="info_num">
					122
				</view>
				<view class="info_name">
					关注
				</view>
			</view>
			<view class="info_item">
				<view class="info_num">
					444
				</view>
				<view class="info_name">
					粉丝
				</view>
			</view>
			<view class="info_item">
				<view class="info_num">
					555555
				</view>
				<view class="info_name">
					获赞和收藏
				</view>
			</view>
		</view> -->

		<!-- 	<view class="order_list">
			<view class="order_item">
				<div class="order_title">订单</div>
				<div class="order_second_title">3笔订单待评价</div>
			</view>
			<view class="order_item">
				<div class="order_title">购物车</div>
				<div class="order_second_title">11个商品</div>
			</view>
			<view class="order_item">
				<div class="order_title">浏览记录</div>
				<div class="order_second_title">看过的笔记</div>
			</view>
		</view> -->

		<view class="publish_body">
			<view class="publish_search">
				<view :class="searchId == 1 ?'search_btn search_btn_check':'search_btn'" @click="searchBtn(1)">发布</view>
				<view :class="searchId == 2 ?'search_btn search_btn_check':'search_btn'" @click="searchBtn(2)">收藏</view>
				<view :class="searchId == 3 ?'search_btn search_btn_check':'search_btn'" @click="searchBtn(3)">关注</view>
			</view>

			<!-- 			<view class="publish_search">
				<view :class="secondId == 1 ?'second_btn search_second_check':'second_btn'" @click="secondBtn(1)">公开
					<span style="margin-left: 6rpx;">0</span>
				</view>
				<view :class="secondId == 2 ?'second_btn search_second_check':'second_btn'" @click="secondBtn(2)">私密
					<span style="margin-left: 6rpx;">0</span>
				</view>
				<view :class="secondId == 3 ?'second_btn search_second_check':'second_btn'" @click="secondBtn(3)">合集
					<span style="margin-left: 6rpx;">0</span>
				</view>
			</view> -->


			<view>
				<scroll-view scroll-y style="height: 880rpx;width: 100%;" @scrolltolower="reachBottom"
					:refresher-triggered="triggered" :refresher-enabled="false" :refresher-threshold="100"
					@refresherrefresh="refresher">
					<view class="dataList" v-if="dataList.length">
						<view class="dataItem" v-for="item,index in dataList" :key="index" @click="toDetail(item)">
							<view class="dataItem_left">
								<image :src="item.images" v-if="item.images" mode="aspectFill" class="info_img"></image>
								<image src="@/static/image/heard.png" v-else mode="aspectFill" class="info_img"></image>
								<view class="data_title">
									{{item.title}}
								</view>
							</view>

							<view style="display: flex;">
								<view class="dataItem_right" @click.stop="toDelete(item)"
									v-if="vuex_user.id == item.user_id && searchId == 1">
									<span>删除</span>
								</view>
								<view class="dataItem_right" @click.stop="tohide(item)"
									v-if="vuex_user.id == item.user_id && searchId == 1 && item.status==1&&item.formtype=='userpublish'">
									<span>隐藏</span>
								</view>
								<view class="dataItem_right" @click.stop="tohide(item)"
									v-if="vuex_user.id == item.user_id && searchId == 1 && item.status==0&&item.formtype=='userpublish'">
									<span>取消隐藏</span>
								</view>
							</view>


						</view>
					</view>
					<view class="centre" v-else>
						<image src="../../static/image/cart.png" mode=""></image>
						<view class="btn" @click="goPage('/sub_pages/addIndex/addIndex', true)">去发布</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<u-top-tips ref="uTips" :navbar-height="statusBarHeight + navbarHeight"></u-top-tips>
		<!-- 底部导航 -->
		<fa-tabbar :visible="true"></fa-tabbar>
	</view>
</template>

<script>
	import {
		avatar
	} from '@/common/fa.mixin.js';
	export default {
		mixins: [avatar],
		computed: {
			wavetop() {
				return this.$u.http.config.baseUrl + '/assets/addons/shop/img/wave-top.png';
			},
			wavemiddle() {
				return this.$u.http.config.baseUrl + '/assets/addons/shop/img/wave-mid.png';
			},
			wavebottom() {
				return this.$u.http.config.baseUrl + '/assets/addons/shop/img/wave-bot.png';
			},
			isBind() {
				return false;
			}
		},

		data() {
			return {
				background: {
					backgroundColor: "transparent",
				},
				userInfo: '',
				// 状态栏高度，H5中，此值为0，因为H5不可操作状态栏
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				// 导航栏内容区域高度，不包括状态栏高度在内
				navbarHeight: 44,
				url: '',
				form: {
					avatar: ''
				},
				searchId: 1,
				secondId: 1,
				dataList: [],
				page: 1,
				triggered: false,
				_freshing: false,
				loadStatus: 'loadmore',
				userId: '',
				publishuid: 0,
				flag: '',
				heardimg: ''

			};
		},


		onShow() {

			//移除事件监听
			uni.$off('uAvatarCropper', this.upload);
			this.getList()
		},
		onLoad(option) {
			// 		url: '/sub_pages/myPublish/myPublish?flag='+flag+'&publishuid='+uid
			if (option.userId) {
				this.userId = option.userId
			}
			if (option.publishuid) {
				this.publishuid = option.publishuid
			}

			if (option.flag) {
				this.flag = option.flag
			}


			if (this.vuex_token) {
				// this.getUserIndex();
			} else {
				this.$u.vuex('vuex_user', {});
			}

		},
		methods: {
			getList() {

				this.$api
					.getmyArticleList({
						page: this.page,
						searchId: this.searchId,
						flag: this.flag,
						publishuid: this.publishuid


					})
					.then(result => {
						const {
							code,
							data: res,
							msg
						} = result;
						if (code) {
							// res.data.forEach(item => {
							// 	this.dataList.push(item);
							// });
							this.dataList = res.data;
							if (res.current_page < res.last_page) {
								this.loadStatus = 'loadmore';
							} else {
								this.loadStatus = 'nomore';
							}

							this.heardimg = this.dataList[0]['headimg'];
						}
						this.triggered = false;
						this._freshing = false;
					});

			},




			toDetail(item) {
				uni.navigateTo({
					url: '/sub_pages/indexDetail/indexDetail?id=' + item.oid
				})
			},
			refresher() {
				if (this._freshing) return;
				this._freshing = true;
				if (!this.triggered) {
					this.triggered = true;
				}
				this.page = 1;
				this.dataList = [];
				this.getList();
			},
			reachBottom() {
				if (this.loadStatus == 'loadmore') {
					this.page = this.page + 1;
					this.loadStatus = loading;
					this.getList();
				}

			},
			searchBtn(type) {
				this.searchId = type
				this.dataList = [];
				this.getList();
			},
			secondBtn(type) {
				this.secondId = type
			},
			async toDelete(item) {
				uni.showModal({
					title: '提示',
					content: '是否确认删除？',
					success: async (res) => {
						if (res.confirm) {
							let res = await this.$api.deluerArticle({
								id: item.id,
								flag: 'del'
							});
							this.page = 1;
							this.dataList = [];
							this.getList();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			async tohide(item) {
				uni.showModal({
					title: '提示',
					content: '是否确认操作？',
					success: async (res) => {
						if (res.confirm) {
							let res = await this.$api.deluerArticle({
								id: item.id,
								flag: 'hide'
							});
							this.page = 1;
							this.dataList = [];
							this.getList();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},


			getUserIndex: async function() {
				let res = await this.$api.getUserIndex({
					loginuid: this.userId,
					publishuid: this.publishuid
				});
				this.userInfo = res.data.userInfo
				uni.stopPullDownRefresh();
				// if (res.code == 1) {
				// 	this.$u.vuex('vuex_user', res.data.userInfo || {});
				// 	if (res.data.showProfilePrompt && !this.vuex_setting.prompted) {
				// 		// 弹窗每次登录状态只提示一次
				// 		this.$u.vuex('vuex_setting.prompted', true);
				// 		uni.showModal({
				// 			title: '温馨提示',
				// 			confirmText: '去设置',
				// 			cancelText: '取消',
				// 			showCancel: true,
				// 			content: '当前未设置昵称，请设置昵称后再继续操作',
				// 			success: (res) => {

				// 				if (res.confirm) {
				// 					this.$u.route("/pages/my/profile");
				// 				} else if (res.cancel) {

				// 				}
				// 			}
				// 		});
				// 	}
				// } else {
				// 	this.$u.toast(res.msg);
				// 	return;
				// }
			},
			toSignin() {
				if (!this.vuex_user.is_install_signin) {
					this.$refs.uTips.show({
						title: '请先安装会员签到插件插件或启用该插件',
						type: 'error',
						duration: '3000'
					});

					return;
				}
				this.goPage('/pages/signin/signin', true);
			},
			editAvatar: async function() {
				let res = await this.$api.goUserAvatar({
					avatar: this.form.avatar
				});
			},
			// #ifndef MP-WEIXIN
			callphone() {
				uni.makePhoneCall({
					phoneNumber: this.vuex_config.phone //仅为示例
				});
			}
			// #endif
		},
		//下拉刷新
		onPullDownRefresh() {
			if (this.vuex_token) {
				// this.getUserIndex();
			} else {
				uni.stopPullDownRefresh();
				this.$u.toast('请先登录');
				this.$u.vuex('vuex_user', {});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f4f6f8;
	}

	.fa-cell {
		color: #606266;
		display: flex;
		align-items: center;
	}

	.home {
		position: relative;

		.userinfo {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 30rpx 0;
			z-index: 100;
			height: 310rpx;

			.u-skeleton-fillet {
				color: #ffffff;
				z-index: 101;
			}
		}

		.corrugated {
			bottom: -2rpx;
			left: 0;
			position: absolute;
			width: 100%;
			height: 50%;
			overflow: hidden;
			z-index: 0;

			.wave-item {
				position: absolute;
				width: 200%;
				left: 0;
				height: 200rpx;
				background-repeat: repeat no-repeat;
				background-position: 0 bottom;
				transform-origin: center bottom;
			}

			.wave-top {
				opacity: 0.5;
				animation: wave-animation 3s;
				animation-delay: 1s;
				background-size: 50% 60rpx;
				z-index: 15;
			}

			.wave-middle {
				opacity: 0.75;
				animation: wavemove 10s linear infinite;
				background-size: 50% 80rpx;
				z-index: 10;
			}

			.wave-bottom {
				animation: wavemove 15s linear infinite;
				background-size: 50% 45rpx;
				z-index: 5;
			}
		}
	}

	@keyframes wavemove {
		0% {
			transform: translateX(0) translateZ(0) scaleY(1);
		}

		50% {
			transform: translateX(-25%) translateZ(0) scaleY(0.55);
		}

		100% {
			transform: translateX(-50%) translateZ(0) scaleY(1);
		}
	}

	.userTop {
		padding: 24rpx;
		display: flex;
		align-items: center;

		.userRight {
			margin-left: 20rpx;

			.userName {
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
				line-height: 44rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}

			.userTips {
				font-weight: 500;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.6);
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}

		.my_logo {
			width: 124rpx;
			height: 124rpx;
			border-radius: 50%;
			flex-shrink: 0;
		}
	}

	.info_group {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.info_item {
			width: 25%;
			text-align: center;

			.info_num {
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				line-height: 44rpx;
				font-style: normal;
				text-transform: none;
			}

			.info_name {
				font-weight: 500;
				font-size: 20rpx;
				color: rgba(51, 51, 51, 0.6);
				line-height: 44rpx;
				font-style: normal;
				text-transform: none;
			}
		}
	}

	.my_vip {
		padding: 24rpx 24rpx 40rpx 24rpx;
		margin: 0 24rpx 24rpx 24rpx;
		background: linear-gradient(90deg, #E1CFB1 0%, #ECDECA 100%);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		top: 60rpx;
		z-index: -1;

		.vip_left {
			.vip_title {
				font-weight: 600;
				font-size: 32rpx;
				color: #8B5B0D;
				line-height: 44rpx;

				font-style: normal;
				text-transform: none;
			}

			.vip_tips {
				font-weight: 500;
				font-size: 20rpx;
				color: rgba(139, 91, 13, 0.6);
				line-height: 44rpx;

				font-style: normal;
				text-transform: none;
			}
		}

		.vip_right {
			background-color: #fff;
			border-radius: 50rpx;
			font-weight: 500;
			font-size: 20rpx;
			color: #000000;
			line-height: 44rpx;
			font-style: normal;
			text-transform: none;
			padding: 4rpx 30rpx;
		}
	}

	.order_group {
		margin: 24rpx;
		padding: 72rpx 24rpx;
		background-color: #fff;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// position: relative;
		// top: -60rpx;

		.order_item {
			width: 20%;
			text-align: center;

			.order_icon {
				width: 64rpx;
				height: 64rpx;
				flex-shrink: 0;

			}

			.order_name {
				font-weight: 500;
				font-size: 20rpx;
				color: rgba(51, 51, 51, 0.6);
				// line-height: 44rpx;

				font-style: normal;
				text-transform: none;
			}
		}
	}

	.cell_group {
		margin: 24rpx;
		border-radius: 24rpx;
		padding: 20rpx 0;
		background-color: #fff;
	}

	.call_img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.order_list {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 10rpx;

		.order_item {
			width: 33.33%;
			background-color: #fff;
			margin: 30rpx;
			border-radius: 20rpx;
			padding: 20rpx;

			.order_title {
				font-size: 28rpx;
				color: #000000;
				line-height: 44rpx;
				font-style: normal;
				text-transform: none;
			}

			.order_second_title {
				font-size: 20rpx;
				color: rgba(51, 51, 51, 0.6);
				line-height: 44rpx;
				font-style: normal;
				text-transform: none;
			}
		}
	}

	.publish_body {
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 24rpx 40rpx;
		min-height: 50vh;

		.publish_search {
			display: flex;
			align-items: center;
			justify-content: start;
			margin-bottom: 20rpx;

			.search_btn {
				margin-right: 20rpx;
				font-size: 28rpx;
				color: rgba(51, 51, 51, 0.6);
				line-height: 44rpx;
				font-style: normal;
				text-transform: none;
			}

			.search_btn_check {
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.8);
				line-height: 44rpx;
				font-style: normal;
				text-transform: none;
				position: relative;
			}


			.second_btn {
				margin-right: 20rpx;
				font-size: 24rpx;
				color: rgba(51, 51, 51, 0.6);
				line-height: 44rpx;
				font-style: normal;
				text-transform: none;
			}

			.search_second_check {
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.8);
				line-height: 44rpx;
				font-style: normal;
				text-transform: none;
				position: relative;
			}

			.search_btn_check::after {
				content: '';
				width: 30rpx;
				height: 4rpx;
				background-color: #529030;
				position: absolute;
				left: 10rpx;
				bottom: -4rpx;
			}
		}
	}

	.centre {
		text-align: center;
		margin: 0 auto;
		font-size: 32rpx;

		image {
			width: 400rpx;
			height: 400rpx;
			border-radius: 50%;
			margin-bottom: 20rpx;
		}

		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.btn {
			margin: 0 auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: #529030;
		}
	}


	.dataList {

		// display: flex;
		.dataItem {
			padding: 30rpx 0;
			display: flex;
			border-bottom: 2rpx solid #efefef;
			justify-content: space-between;
			align-items: center;
		}

		.dataItem_left {
			display: flex;
		}

		.dataItem_right {
			font-size: 28rpx;
			color: #FF6600;
			background: #FFEADC;
			border-radius: 4rpx;
			padding: 8rpx 20rpx;
			border: 1rpx solid #FFE1CE;
			margin-right: 6rpx;
		}

		.data_title {
			margin-left: 20rpx;
		}


	}

	.info_img {
		width: 120rpx;
		height: 120rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
	}
</style>